<template>
	<Layout style="padding:0 24px 24px;height:100%;">
		<Breadcrumb style="margin:24px 0">
			<BreadcrumbItem>首页</BreadcrumbItem>
			<BreadcrumbItem>作业管理</BreadcrumbItem>
		</Breadcrumb>
		<Form inline>
			<ButtonGroup style="margin-right:24px;"><Button title="新增" icon="md-add" @click="editModal = true"></Button></ButtonGroup>
			<FormItem><Input type="text" placeholder="作业名称" clearable v-model="pageRequest.condition.name" /></FormItem>
			<FormItem><Button type="primary" icon="ios-search" shape="circle" title="查询" @click="list"></Button></FormItem>
		</Form>
		<Content ref="content" style="padding:0px;background:#fff;height:100%">
			<Table :loading="loading" :columns="tableColumns" :data="pageData.content" :height="tableHeight" @on-selection-change="onSelectionChange" border>
				<template slot-scope="{ row, index }" slot="status">
					<Tag :color="row.status == 'RUNNING' ? 'success' : 'error'">{{ row.status }}</Tag>
				</template>
				<template slot-scope="{ row, index }" slot="action">
					<el-dropdown @command="jobAction($event, row)">
						<Button type="primary" size="small">
							操作
							<Icon type="ios-arrow-down"></Icon>
						</Button>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item command="modify">修改</el-dropdown-item>
							<el-dropdown-item command="remove">删除</el-dropdown-item>
							<el-dropdown-item command="start">启动</el-dropdown-item>
							<el-dropdown-item command="stop">停止</el-dropdown-item>
							<el-dropdown-item command="once">执行一次</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
				</template>
				<template slot="footer">
					<Page style="margin-left:10px;" :total="pageData.total" :current="pageData.page" :page-size="15" @on-change="changePage"></Page>
				</template>
			</Table>
		</Content>
		<!-- 编辑对话框 -->
		<Modal :width="400" v-model="editModal" @on-visible-change="onVisibleChange" title="编辑任务信息" footer-hide>
			<Form ref="form" :model="info" :label-width="100" :rules="rules">
				<FormItem label="执行器" prop="execId">
					<Select style="min-width: 200px;" placeholder="请选择执行器" v-model="info.execId" @on-select="executorChange" clearable>
						<Option v-for="item in executorOptions" :key="item.id" :value="item.id" :label="item.name"></Option>
					</Select>
				</FormItem>
				<FormItem label="任务名称" prop="name"><Input v-model="info.name" type="text" placeholder="请输入任务名称" /></FormItem>
				<FormItem label="任务编码" prop="code"><Input v-model="info.code" type="text" placeholder="请输入任务编码" /></FormItem>
				<FormItem label="任务端点" prop="endpoint"><Input v-model="info.endpoint" type="text" placeholder="请输入任务端点" /></FormItem>
				<FormItem label="Cron表达式" prop="cron"><Input v-model="info.cron" type="text" placeholder="请输入Cron表达式" /></FormItem>
				<FormItem label="重试次数" prop="retry"><Input v-model="info.retry" type="number" placeholder="请输入重试次数" /></FormItem>
				<FormItem label="负责人" prop="person"><Input v-model="info.person" type="text" placeholder="请输入负责人姓名" /></FormItem>
				<FormItem label="通知邮箱" prop="email"><Input v-model="info.email" type="text" placeholder="请输入邮箱地址" /></FormItem>
				<FormItem label="任务参数" prop="params"><Input v-model="info.params" type="text" placeholder="请输入任务业参数" /></FormItem>
				<FormItem label="任务描述" prop="jobDesc"><Input v-model="info.jobDesc" type="textarea" placeholder="请输入任务描述" /></FormItem>
				<FormItem><Button type="primary" @click="save">保存</Button></FormItem>
			</Form>
		</Modal>
	</Layout>
</template>

<script language="JavaScript">
export default {
	components: {},
	data() {
		return {
			tableHeight: 100, // 自适应表格高度
			loading: false, // 加载中
			tableColumns: [
				{
					type: 'selection',
					width: 80
				},
				{
					title: '任务编码',
					key: 'code',
					width: 250,
					resizable: true
				},
				{
					title: '任务名称',
					key: 'name',
					width: 250,
					resizable: true
				},
				{
					title: '任务状态',
					slot: 'status',
					width: 250,
					resizable: true
				},
				{
					title: '任务端点',
					key: 'endpoint',
					width: 'auto',
					minWidth: 250,
					resizable: true
				},
				{
					title: 'cron表达式',
					key: 'cron',
					width: 250,
					resizable: true
				},
				{
					title: '负责人',
					key: 'person',
					width: 250,
					resizable: true
				},
				{
					title: '通知邮箱',
					key: 'email',
					width: 250,
					resizable: true
				},
				{
					title: '任务参数',
					key: 'params',
					width: 250,
					resizable: true
				},
				{
					title: '任务描述',
					key: 'jobDesc',
					width: 250,
					resizable: true
				},
				{
					title: '下一次执行时间',
					key: 'nextTime',
					width: 250,
					resizable: true
				},
				{
					title: '操作',
					slot: 'action',
					fixed: 'right',
					width: 150
				}
			], // 表格列
			// 分页请求
			pageRequest: {
				page: 1,
				rows: 15,
				sort: 'id:asc',
				condition: {}
			},
			// 分页查询结果
			pageData: {
				page: 1,
				total: 2,
				content: [] // 表格数据
			},
			editModal: false, // 编辑对话框显示
			info: {
				id: '',
				execId: '',
				execName: '',
				code: '',
				name: '',
				status: '',
				endpoint: '',
				cron: '0 0/5 * * * ?',
				retry: '1',
				email: '',
				params: ''
			}, // 保存信息
			rules: {
				execId: [
					{
						required: true,
						message: '必选'
					}
				],
				code: [
					{
						required: true,
						message: '必填'
					}
				],
				name: [
					{
						required: true,
						message: '必填'
					}
				],
				endpoint: [
					{
						required: true,
						message: '必填'
					}
				],
				cron: [
					{
						required: true,
						message: '必填'
					}
				],
				retry: [
					{
						required: true,
						message: '必填'
					}
				]
			}, // 验证规则
			selection: [], //已选记录
			executorOptions: [] // 执行器选项
		};
	},
	computed: {},
	watch: {},
	created: function() {},
	mounted: function() {
		this.$nextTick(() => {
			this.tableHeight = this.$refs.content.$el.clientHeight;
			this.list();
			this.listExecutor();
		});
	},
	methods: {
		// 保存
		save: function() {
			this.$refs['form'].validate(valid => {
				if (valid) {
					this.$request.post(
						'/admin/sys/sched/job/save',
						this.info,
						res => {
							this.editModal = false;
							this.list();
						},
						true,
						true
					);
				}
			});
		},
		// 获取列表
		list: function() {
			this.$request.post(
				'/admin/sys/sched/job/list',
				this.pageRequest,
				res => {
					this.pageData = res.data || this.pageData;
				},
				false,
				false
			);
		},
		// 修改
		modify: function(row) {
			this.editModal = true;
			this.$nextTick(() => {
				this.info = Object.assign({}, row);
			});
		},
		// 删除
		remove: function(row) {
			this.$Modal.confirm({
				title: '确认？',
				content: '删除后不可恢复，是否继续？',
				onOk: () => {
					this.$request.post(
						`/admin/sys/sched/job/delete/${row.id}`,
						{},
						res => {
							this.list();
						},
						true,
						true
					);
				}
			});
		},
		// 关闭对话框
		onVisibleChange: function() {
			this.$refs['form'].resetFields();
			this.info.id = '';
			this.info.status = '';
		},
		// 表格多选事件
		onSelectionChange: function(sel) {
			this.selection = sel;
		},
		// 分页
		changePage: function(page) {
			this.pageRequest.page = page;
			this.list();
		},
		// 执行器列表获取
		listExecutor: function(value, flag) {
			let condition = {};
			this.$request.post(
				'/admin/sys/sched/executor/list',
				{
					page: 1,
					rows: 100,
					condition: condition
				},
				res => {
					this.executorOptions = (res.data || {}).content || [];
				},
				false,
				false
			);
		},
		// 执行器选择
		executorChange: function(item) {
			this.info.execName = item.label;
		},
		// 操作
		jobAction: function(name, row) {
			if (name == 'modify') {
				this.modify(row);
			} else if (name == 'remove') {
				this.remove(row);
			} else if (name == 'start') {
				this.start(row);
			} else if (name == 'stop') {
				this.stop(row);
			} else if (name == 'once') {
				this.once(row);
			}
		},
		// 启动
		start: function(row) {
			this.$request.post(
				`/admin/sys/sched/job/start/${row.id}`,
				{},
				res => {
					this.list();
				},
				true,
				true
			);
		},
		// 停止
		stop: function(row) {
			this.$request.post(
				`/admin/sys/sched/job/stop/${row.id}`,
				{},
				res => {
					this.list();
				},
				true,
				true
			);
		},
		// 执行一次
		once: function(row) {
			this.$Modal.confirm({
				title: '提示',
				content: '是否执行一次任务？',
				onOk: () => {
					this.$request.post(
						`/admin/sys/sched/job/once/${row.id}`,
						{},
						res => {
							this.list();
						},
						true,
						true
					);
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped="scoped"></style>
